<template>
  <div>
    <h2>仪表盘</h2>
    <a-row :gutter="16" style="margin-top: 24px">
      <a-col :span="6">
        <a-card>
          <a-statistic
            title="Banner总数"
            :value="5"
            :value-style="{ color: '#3f8600' }"
          >
            <template #prefix>
              <PictureOutlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic
            title="产品总数"
            :value="12"
            :value-style="{ color: '#1890ff' }"
          >
            <template #prefix>
              <AppstoreOutlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic
            title="案例总数"
            :value="8"
            :value-style="{ color: '#722ed1' }"
          >
            <template #prefix>
              <ProjectOutlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic
            title="新闻总数"
            :value="28"
            :value-style="{ color: '#cf1322' }"
          >
            <template #prefix>
              <FileTextOutlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="16" style="margin-top: 16px">
      <a-col :span="6">
        <a-card>
          <a-statistic
            title="解决方案"
            :value="6"
            :value-style="{ color: '#faad14' }"
          >
            <template #prefix>
              <BulbOutlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic
            title="招聘职位"
            :value="10"
            :value-style="{ color: '#13c2c2' }"
          >
            <template #prefix>
              <TeamOutlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic
            title="用户总数"
            :value="3"
            :value-style="{ color: '#52c41a' }"
          >
            <template #prefix>
              <UserOutlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
    </a-row>

    <a-card title="快捷操作" style="margin-top: 24px">
      <a-space wrap>
        <a-button type="primary" @click="$router.push('/banners')">
          <PictureOutlined />
          管理Banner
        </a-button>
        <a-button type="primary" @click="$router.push('/products')">
          <AppstoreOutlined />
          管理产品
        </a-button>
        <a-button type="primary" @click="$router.push('/cases')">
          <ProjectOutlined />
          管理案例
        </a-button>
        <a-button type="primary" @click="$router.push('/solutions')">
          <BulbOutlined />
          管理解决方案
        </a-button>
        <a-button type="primary" @click="$router.push('/news')">
          <FileTextOutlined />
          管理新闻
        </a-button>
        <a-button type="primary" @click="$router.push('/jobs')">
          <TeamOutlined />
          管理招聘
        </a-button>
        <a-button type="primary" @click="$router.push('/users')">
          <UserOutlined />
          管理用户
        </a-button>
      </a-space>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import {
  PictureOutlined,
  AppstoreOutlined,
  ProjectOutlined,
  FileTextOutlined,
  BulbOutlined,
  TeamOutlined,
  UserOutlined
} from '@ant-design/icons-vue'
</script>

